<template>
  <div class="container">
    <!-- 导航栏 -->
    <van-sticky>
      <van-nav-bar title="订单列表"/>
    </van-sticky>

    <!-- 内容 -->
    <div class="content">
      <van-cell-group inset class="order-item" v-for="(order, o) in orderList" :key="o">
          <van-row gutter="10" class="row" @click="onOrderItemClick(order.id)">
            <van-col span="6" class="col-image">
              <van-image class="image" fit="scale-down" :src="order.roomTypeImage"></van-image>
            </van-col>
            <van-col span="18" class="col-info">
              <div class="tag">
                <van-tag plain color="#7c6ba2" v-if="order.status == 0">待入住</van-tag>
                <van-tag plain color="#aaaaaa" v-if="order.status == 1">已完成</van-tag>
                <van-tag plain color="#7c6ba2" v-if="order.status == 2">入住中</van-tag>
                <van-tag plain color="#ebc8aa" v-if="order.status == 3">已取消</van-tag>
              </div>
              <div class="room-type-name">{{ order.roomTypeName }}</div>
              <div class="booking-dates">{{ order.checkInDate }} - {{ order.checkOutDate }}，共{{ order.bookingDays }}晚</div>
              <div class="customer">{{ order.customerFamilyName }}{{ order.customerGender == 0 ? '女士' : '先生' }}，{{ order.customerPhoneNumber }}</div>
              <div class="total-price"><sub>￥</sub>{{ order.totalPrice }}<sub>元</sub></div>
            </van-col>
          </van-row>
      </van-cell-group>
      <div class="no-more">已经加载全部数据</div>
    </div>

    <!--  底部导航栏 -->
    <van-tabbar route v-model="activeTabBarIndex" active-color="#7458b0" inactive-color="#616161">
      <van-tabbar-item icon="todo-list-o" replace to="/">预订</van-tabbar-item>
      <van-tabbar-item icon="orders-o" replace to="/order-list">订单</van-tabbar-item>
      <van-tabbar-item icon="setting-o" replace to="/settings">设置</van-tabbar-item>
      <van-tabbar-item icon="apps-o" replace to="/api-doc">文档</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTabBarIndex: 1,
      orderList: []
    }
  },
  methods: {
    onOrderItemClick(id) {
      this.$router.push({ path: '/order-details', query: { orderId: id }})
    },
    loadOrderList() {
      let orderList = [
        { id: 1, roomTypeImage: require("@/assets/image/room-1.png"), roomTypeName: '大床房', checkInDate: '2024.12.11', checkOutDate: '2024.12.13', bookingDays: 2, customerFamilyName: '周', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 1000, status: 0, paymentState: 1, paymentSerialNumber: '20250101121314567001', paymentMode: 0 },
        { id: 2, roomTypeImage: require("@/assets/image/room-2.png"), roomTypeName: '双床房', checkInDate: '2024.12.12', checkOutDate: '2024.12.15', bookingDays: 3, customerFamilyName: '周', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 1500, status: 2, paymentState: 1, paymentSerialNumber: '20250101121314567001', paymentMode: 0 },
        { id: 3, roomTypeImage: require("@/assets/image/room-3.png"), roomTypeName: '豪华套房', checkInDate: '2024.12.13', checkOutDate: '2024.12.16', bookingDays: 3, customerFamilyName: '周', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 2400, status: 1, paymentState: 1, paymentSerialNumber: '20250101121314567001', paymentMode: 0 },
        { id: 4, roomTypeImage: require("@/assets/image/room-4.png"), roomTypeName: '标准单人间', checkInDate: '2024.12.14', checkOutDate: '2024.12.17', bookingDays: 3, customerFamilyName: '周', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 900, status: 3, paymentState: 1, paymentSerialNumber: '20250101121314567001', paymentMode: 0 },
        { id: 5, roomTypeImage: require("@/assets/image/room-5.png"), roomTypeName: '亲子主题房', checkInDate: '2024.12.15', checkOutDate: '2024.12.18', bookingDays: 3, customerFamilyName: '周', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 1800, status: 3, paymentState: 1, paymentSerialNumber: '20250101121314567001', paymentMode: 0 },
        { id: 6, roomTypeImage: require("@/assets/image/room-6.png"), roomTypeName: '情侣浪漫房', checkInDate: '2024.12.16', checkOutDate: '2024.12.19', bookingDays: 3, customerFamilyName: '周', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 1350, status: 1, paymentState: 1, paymentSerialNumber: '20250101121314567001', paymentMode: 0 },
        { id: 7, roomTypeImage: require("@/assets/image/room-7.png"), roomTypeName: '行政楼层套房', checkInDate: '2024.12.17', checkOutDate: '2024.12.20', bookingDays: 3, customerFamilyName: '周', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 3000, status: 3, paymentState: 1, paymentSerialNumber: '20250101121314567001', paymentMode: 0 },
        { id: 8, roomTypeImage: require("@/assets/image/room-8.png"), roomTypeName: '三人家庭房', checkInDate: '2024.12.18', checkOutDate: '2024.12.21', bookingDays: 3, customerFamilyName: '周', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 2100, status: 1, paymentState: 1, paymentSerialNumber: '20250101121314567001', paymentMode: 0 },
        { id: 9, roomTypeImage: require("@/assets/image/room-9.png"), roomTypeName: '四人团体房', checkInDate: '2024.12.19', checkOutDate: '2024.12.22', bookingDays: 3, customerFamilyName: '周', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 2400, status: 2, paymentState: 1, paymentSerialNumber: '20250101121314567001', paymentMode: 0 },
        { id: 10, roomTypeImage: require("@/assets/image/room-10.png"), roomTypeName: '海景房', checkInDate: '2024.12.20', checkOutDate: '2024.12.23', bookingDays: 3, customerFamilyName: '周', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 3300, status: 1, paymentState: 1, paymentSerialNumber: '20250101121314567001', paymentMode: 0 }
      ];
      this.orderList = orderList;
    }
  },
  mounted() {
    this.loadOrderList()
  }
}
</script>

<style scoped>
.container { max-width: 400px; background-color: #f6f6f6; height: 100vh; }
.van-tabbar { max-width: 400px; }

.content { padding: 16px 0 70px 0; }
.order-item { margin-bottom: 16px; }
.order-item .col-info { position: relative; }
.order-item .tag { position: absolute; right: 10px; top: 5px; }
.order-item .tag .van-tag { font-size: 8px;}
.order-item .room-type-name { font-size: 14px; margin: 5px 0; }
.order-item .booking-dates { font-size: 11px; color: #999; margin: 2px 0; }
.order-item .customer { font-size: 11px; color: #999; margin: 2px 0; }
.order-item .total-price { color: #e62e2f; font-size: 12px; }
.order-item .total-price sub { vertical-align: baseline; font-size: 0.6em; }
.no-more { text-align: center; color: #999; margin-top: 12px; font-size: 10px; }
</style>